<template>
	<view class="myOrder" :style="{minHeight: pageHeight + 'px'}">
		<view class="nav-li">
			<u--input
			    placeholder="搜索"
				placeholderStyle="font-size: '14px';color: '#2e303399'"
				style="height: 22px;border-radius: 20px; border: none;background-color: #F7F8FA;"
			    v-model="searchValue"
			    @change="searchChange"
				@focus="searchFocus"
			  >
			  <template slot="prefix">
			  	<u--image src="../../../static/images/search.svg" width="17px" height="18px" mode=""></u--image>
			  </template>
			  </u--input>
		</view>
		
		<view class="orderList">
			<view @click="toDetail" v-for="item in 5" style="width: 345px;margin: 0 auto 15px auto;background-color: #fff;border-radius: 10px;padding: 15px;box-sizing: border-box;">
				<view style="display: flex;font-size: 14px;margin-bottom: 10px;align-items: center;">
					<u--image src="" width="24px" height="24px" style="width: 24px;display: inline-block;margin-right: 10px;"></u--image>
					<text style="flex: 1;">福建北峰科技股份有限公司</text>
					<text style="flex: 0 0 60px;text-align: right;">待发货</text>
				</view>
				<u-line></u-line>
				<view style="display: flex;margin-top: 10px;">
					<view style="width: 60px;margin-right: 15px;">
						<u--image src="" width="60px" height="60px" style="display: inline-block;margin-right: 15px;"></u--image>
					</view>
					<view style="flex: 1;font-size: 14px;">
						<view style="display: flex;flex-direction: row">
							<view style="flex: 1;">
								<text style="width: 190px;display: block;margin-bottom: 10px;color: #333;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">隧道、深井、人防的应急通信问题</text>
								<text style="display: block;font-size: 12px;color: rgba(46, 48, 51, 0.6);width: 100%;">规格：2</text>
							</view>
							<view>
								<text style="display: block;font-size: 16px;color: #EF312A;margin-top: 6px;">￥9999</text>
								<text style="display: block;font-size: 14px;color: rgba(46, 48, 51, 0.6);margin-top: 5px;margin-bottom: 21px;">x2</text>
							</view>
						</view>
						
						<view 
							style="
							display: block;
							width: 100%;
							text-align: center;
							width: 77px;
							height: 27px;
							line-height: 27px;
							background: #EF312A;
							border-radius: 5px;float: right;
							border: 1px solid rgba(46,48,51,0.1);
							color: #fff;
							margin-left: 10px;
							font-size: 12px"
							>
							确定收货
						</view>
						
						<view style="display: block;width: 100%;text-align: center;width: 77px;height: 27px;line-height: 27px;background: #FFFFFF;border-radius: 5px;float: right;border: 1px solid rgba(46,48,51,0.1);color: #2E3033;font-size: 12px">
							申请退款
						</view>
						
						<view style="display: block;width: 100%;text-align: center;width: 77px;height: 27px;line-height: 27px;background: #FFFFFF;border-radius: 5px;float: right;border: 1px solid rgba(46,48,51,0.1);color: #2E3033;font-size: 12px">
							删除订单
						</view>
						
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchValue: '',
				pageHeight: 0,
			}
		},
		created() {
			this.$nextTick(() => {
				uni.getSystemInfo({
				  success: (res) => {  
					this.pageHeight = res.windowHeight
				  }  
				});
				
		
			})
		},
		methods: {
			searchChange() {},
			searchFocus() {},
			toDetail() {
				uni.navigateTo({
					url: '/pages/components/mine/orderDetail'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.myOrder {
		background-color: #FAFBFC;
		box-sizing: border-box;
		
		.nav-li {
			width: 100%;
			margin: 15px auto;
			background-color: #fff;
			box-sizing: border-box;
			padding: 5px 15px;
		}
	}
</style>